<template>
  <div>
    <el-row :gutter="4" class="baseInfo">
      <el-col v-bind="grid" class="ivu-mb">
       <div class="zise main_tit">
          <p>18</p>
          <p>今日参加活动人数</p>
        </div>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <div  class="main_tit lanse">
          <p>￥2330.00</p>
          <p>今日活动收入</p>
        </div>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <div class="main_tit juse">
          <p>18</p>
          <p>今日课程订单数</p>
        </div>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <div class="main_tit lvse">
          <p>￥2330.00</p>
          <p>今日课程订单收入</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// import {viewModelApi} from '@/api/dashboard'
export default {
  data() {
    return {
      grid: { xl: 6, lg: 6, md: 12, sm: 12, xs: 24 },
      viewData: {},
    };
  },
  methods: {
    statisticsOrder() {
      // viewModelApi().then(async res => {
      //   this.viewData = res;
      // })
    },
  },
  mounted() {
    this.statisticsOrder();
  },
};
</script>
<style scoped lang="scss">
.zise{
  background: url(~@/assets/img/zise.png) no-repeat 0/100%;
}
.lanse{
  background: url(~@/assets/img/lanse.png) no-repeat 0/100%;
}
.juse{
  background: url(~@/assets/img/juse.png) no-repeat 0/100%;
}
.lvse{
  background: url(~@/assets/img/lvse.png) no-repeat 0/100%;
}
.ivu-mb {
  margin-bottom: 20px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
.main_tit {
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  width: 100%;
  padding-left: 40px;
  height: 180px;
  padding-top: 30px;
}
.baseInfo{
   width: 100%;
}
</style>